<script>
import { computed, inject, ref, h, watch } from "vue";
import { FormItem, Input, Select, SelectOption } from "ant-design-vue";
import { GetStringWidth } from '../../utils/index';

export default {
    props: ['label', 'options', 'placeholder'],
    setup(props) {

        const GetDict = inject('GetDict');
        const Parmas = inject('Parmas');
        const InputPlaceholder = computed(() => props.placeholder || `请输入${props.label}`);
        const Type = ref('');
        const value = ref();
        const SelectOptions = ref([]);
        const SelectItem = ref();
        const ItemKeyArray = [];
        const SelectWidth = ref();


       
        const changeOptions =  async (options) => {
            if (typeof props.options === 'function') {
                SelectOptions.value = await options();
            } else if (typeof props.options === 'string') {
                SelectOptions.value = GetDict(props.options);
            } else {
                SelectOptions.value = options || props.options || [];
            }
            let MaxStr = 0;
            ItemKeyArray.splice(0, ItemKeyArray.length, ...SelectOptions.value.map(item => {
                if (item.label) {
                    MaxStr = Math.max(GetStringWidth(item.label), MaxStr);
                }
                return item.itemkey;
            }));
            SelectWidth.value = MaxStr;
            Type.value = SelectOptions.value[0].itemkey;
        };

        watch(Type, (val, old) => {
            delete Parmas.value[old];
            Parmas.value[val] = null;
            SelectItem.value = SelectOptions.value[ItemKeyArray.indexOf(val)];
        });

        watch(() => props.options, (val) => {
            if (val) changeOptions(val);
        }, { immediate: true });

        return () => h(FormItem, { label: props.label }, () => h(Input, {
            allowClear: true,
            value: Parmas.value[Type.value],
            maxlength: SelectItem.value?.max,
            'onUpdate:value': (val) => {
                if (SelectItem.value?.valueType === 'number') {
                    // 处理所有可能的空值情况
                    val = val === '' || val === null || val === undefined ? null : Number(val);
                    Parmas.value[Type.value] = isNaN(val) ? null : val;
                } else {
                    Parmas.value[Type.value] = val;
                }
                console.log(val);
            },
            onBlur() {
                // 添加 null 值显式处理
                if (SelectItem.value?.valueType === 'number' && !Parmas.value[Type.value]) {
                    Parmas.value[Type.value] = null;
                }
            },
            placeholder: InputPlaceholder.value
        }, {
            addonBefore: () => h(Select, {
                style: { width: `${SelectWidth.value + 36}px` },
                value: Type.value,
                'onUpdate:value': (val) => Type.value = val
            }, () => SelectOptions.value.map(item => h(SelectOption, { value: item.itemkey }, () => item.label)))
        }));
    }
};
</script>
<style lang="less" scoped></style>